var that //a5
// a1
class Tab {
  constructor(id) {
    // a2.2
    this.main = document.querySelector(id)
    // li的父元素 b5
    this.ul = this.main.querySelector('.firstnav ul:first-child')
    // b1
    this.add = this.main.querySelector('.tabadd')
    //b6 section 父元素
    this.fsection = this.main.querySelector('.tabscon')

    // a3.1
    this.init()
    // a5
    that = this
  }

  init() {
    this.updateNode()

    // a3
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i
      this.lis[i].onclick = this.toggleTab
      // c2 给X绑定点击事件
      this.remove[i].onclick = this.removeTab
      // d2
      this.spans[i].ondblclick = this.editTab
      // d7
      this.sections[i].ondblclick = this.editTab
    }

    // b2
    console.log('this.add', this.add)
    this.add.onclick = this.addTab
  }

  updateNode() {
    this.lis = this.main.querySelectorAll('li')
    this.sections = this.main.querySelectorAll('section')
    // c1 删除按钮，而且是所有的删除按钮
    this.remove = this.main.querySelectorAll('.icon-guanbi')
    // d1
    this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
  }
  // 1. 切换功能
  toggleTab() {
    // console.log(this) // 这里的this，是上面for循环的this.lis[i]，谁调用了这个方法，指针就指向谁
    // a7.1
    that.clearClass()
    // a4
    this.className = 'liactive'
    // a6
    that.sections[this.index].className += ' conactive'
  }
  // a7
  // 清除所有li 和section 的类
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }
  // 2. 添加功能
  addTab() {
    that.clearClass()
    var random = Math.random()
    let li = `<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`
    var section = '<section class="conactive">测试 ' + random + '</section>'
    // b3,b4
    that.ul.insertAdjacentHTML('beforeend', li)
    // b7
    that.fsection.insertAdjacentHTML('beforeend', section)
    // b8
    that.init()
  }
  // 3. 删除功能
  removeTab(e) {
    e.stopPropagation() // 阻止冒泡，防止出发li的切换点击事件
    // c3
    let index = this.parentNode.index
    console.log(index)
    // c4 删除
    that.lis[index].remove()
    // c5
    that.sections[index].remove()
    // c6
    that.init()
    // c9
    if (document.querySelector('.liactive')) return
    index--
    // c7 自动调用点击事件，不需要鼠标触发，少一个on
    // c8
    that.lis[index] && that.lis[index].click()
  }
  // 4. 修改功能
  editTab() {
    // d4.1 先获取文本
    let str = this.innerHTML
    // d3
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    // console.log('11')
    // d4
    this.innerHTML = '<input type="text" />'
    // d4.2
    let input = this.children[0]
    input.value = str
    // d4.3
    input.select()
    // d5
    input.onblur = function () {
      this.parentNode.innerHTML = this.value
    }
    // d6
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        // 手动调用表单失去焦点事件，不需要鼠标离开操作
        this.blur()
      }
    }
  }
}
// a2 a2.1
new Tab('#tab')
